import { defineComponent } from 'vue'
import CommentAll from './components/CommentAll'
import IconSelector from '@/components/nComponents/IconSelector'
import {
  NCollapseItem,
  NInput,
  NInputNumber,
  NSelect,
  NSwitch,
  NButton,
  NButtonGroup
} from 'naive-ui'
import type { PropType } from 'vue'
import type { questionSideListState } from '@/types/baseConfig'

export default defineComponent({
  name: 'TextInputEdit',
  props: {
    compData: {
      type: Object as PropType<questionSideListState>,
      default: () => {
        return {}
      }
    }
  },
  emits: ['save'],
  setup: function (props, { emit }) {
    const handSave = (e: questionSideListState) => {
      emit('save', e)
    }
    const setNull = (
      info: questionSideListState,
      e: 'minlength' | 'maxlength',
      handOptions: () => void
    ) => {
      if (info.TextInputForm) info.TextInputForm[e] = null
      setTimeout(() => {
        if (info.TextInputForm) delete info.TextInputForm[e]
      }, 80)
      handOptions()
    }
    const loadingChange = (
      e: questionSideListState,
      status: boolean | undefined,
      handOptions: () => void
    ) => {
      if (e.TextInputForm) {
        e.TextInputForm.loading = status
      }
      handOptions()
    }
    const autosizeTypeOptions = [
      {
        label: '自适应/非自适应',
        value: 'boolean'
      },
      {
        label: '自定义',
        value: 'diy'
      }
    ]
    const typeOptions = [
      {
        label: '文本',
        value: 'text'
      },
      {
        label: '文本域',
        value: 'textarea'
      },
      {
        label: '密码',
        value: 'password'
      }
    ]
    const showPasswordOnOptions = [
      {
        label: '点击',
        value: 'click'
      },
      {
        label: '鼠标经过',
        value: 'mousedown'
      },
      {
        label: '不展示',
        value: ''
      }
    ]
    return () => (
      <CommentAll
        comp-data={props.compData}
        onSave={handSave}
        v-slots={{
          default: ({
            info,
            handOptions,
            handSetting
          }: {
            info: questionSideListState
            handOptions: () => void
            handSetting: (labelKey: string) => void
          }) => (
            <NCollapseItem
              name="rowParams"
              v-slots={{
                header: () => (
                  <div class="cell flex item">
                    <div class="title u-line-1">文本输入框属性</div>
                  </div>
                ),
                default: () => (
                  <>
                    {info.TextInputForm && (
                      <div>
                        <div class="settingItemTitle">提示语句</div>
                        <div class="edit-input">
                          <NInput
                            v-model:value={info.TextInputForm.placeholder}
                            placeholder="请输入placeholder"
                            clearable
                            onBlur={handOptions}
                          />
                        </div>
                        <div class="mt-[20px]">
                          <div class="settingItemTitle">默认值</div>
                          <div class="edit-input">
                            <NInput
                              v-model:value={info.commonForm.defaultValue}
                              placeholder="请输入"
                              clearable
                              onBlur={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px]">
                          <div class="settingItemTitle">输入框类型</div>
                          <div class="edit-input">
                            <NSelect
                              v-model:value={info.TextInputForm.type}
                              options={typeOptions}
                              placeholder="请选择"
                              clearable
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        {info.TextInputForm.type === 'password' && (
                          <>
                            <div class="mt-[20px]">
                              <div class="settingItemTitle">显示密码的时机</div>
                              <div class="edit-input">
                                <NSelect
                                  v-model:value={info.TextInputForm.showPasswordOn}
                                  options={showPasswordOnOptions}
                                  placeholder="请选择"
                                  clearable
                                  onUpdateValue={handOptions}
                                />
                              </div>
                            </div>
                            <div class="mt-[20px]">
                              <div class="settingItemTitle">密码关闭时的密码开关图标</div>
                              <div class="edit-input">
                                <IconSelector
                                  v-model={info.TextInputForm.passwordInvisibleIcon}
                                  onUpdate:modelValue={handOptions}
                                />
                              </div>
                            </div>
                            <div class="mt-[20px]">
                              <div class="settingItemTitle">密码显示时的密码开关图标</div>
                              <div class="edit-input">
                                <IconSelector
                                  v-model={info.TextInputForm.passwordVisibleIcon}
                                  onUpdate:modelValue={handOptions}
                                />
                              </div>
                            </div>
                          </>
                        )}
                        <div class="mt-[20px] flex items-center">
                          <div class="settingItemTitle">只读</div>
                          <div class="flex-1 ml-[5px]">
                            <NSwitch
                              v-model:value={info.TextInputForm.readonly}
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px] flex items-center">
                          <div class="settingItemTitle">是否可清空</div>
                          <div class="flex-1 ml-[5px]">
                            <NSwitch
                              v-model:value={info.TextInputForm.clearable}
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        {info.TextInputForm.clearable && (
                          <div class="mt-[20px] flex items-center">
                            <div class="settingItemTitle">自定义删除图标</div>
                            <div class="flex-1 ml-[5px]">
                              <IconSelector
                                v-model={info.TextInputForm.clearableIcon}
                                onUpdate:modelValue={handOptions}
                              />
                            </div>
                          </div>
                        )}
                        <div class="mt-[20px] flex items-center">
                          <div class="settingItemTitle">输入框是否圆角</div>
                          <div class="flex-1 ml-[5px]">
                            <NSwitch
                              v-model:value={info.TextInputForm.round}
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px] flex items-center">
                          <div class="settingItemTitle">是否显示字数统计</div>
                          <div class="flex-1 ml-[5px]">
                            <NSwitch
                              v-model:value={info.TextInputForm.showCount}
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        {info.TextInputForm.showCount && (
                          <>
                            <div class="mt-5 flex items-center">
                              <div class="settingItemTitle">最小输入长度</div>
                              <div class="ml-[10px] flex-1 flex items-center">
                                <NButton
                                  size="small"
                                  type={
                                    info.TextInputForm.minlength === undefined
                                      ? 'primary'
                                      : 'default'
                                  }
                                  onClick={() => setNull(info, 'minlength', handOptions)}
                                >
                                  <span>空</span>
                                </NButton>
                                <NInputNumber
                                  class="ml-[5px]"
                                  v-model:value={info.TextInputForm.minlength}
                                  placeholder="请输入"
                                  min={1}
                                  onBlur={handOptions}
                                />
                              </div>
                            </div>
                            <div class="mt-5 flex items-center">
                              <div class="settingItemTitle">最大输入长度</div>
                              <div class="ml-[10px] flex-1 flex items-center">
                                <NButton
                                  size="small"
                                  type={
                                    info.TextInputForm.maxlength === undefined
                                      ? 'primary'
                                      : 'default'
                                  }
                                  onClick={() => setNull(info, 'maxlength', handOptions)}
                                >
                                  <span>空</span>
                                </NButton>
                                <NInputNumber
                                  class="ml-[5px]"
                                  v-model:value={info.TextInputForm.maxlength}
                                  placeholder="请输入"
                                  onBlur={handOptions}
                                />
                              </div>
                            </div>
                            <div class="mt-[20px] flex items-center">
                              <div class="settingItemTitle">计算输入的字数</div>
                              <div class="flex-1 ml-[5px]">
                                <NButton
                                  round
                                  size="small"
                                  onClick={() => handSetting('TextInputForm.countGraphemes')}
                                >
                                  去设置
                                </NButton>
                              </div>
                            </div>
                          </>
                        )}
                        <div class="mt-[20px] flex items-center">
                          <div class="settingItemTitle">是否自动获取焦点</div>
                          <div class="flex-1 ml-[5px]">
                            <NSwitch
                              v-model:value={info.TextInputForm.autofocus}
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px] flex items-center">
                          <div class="settingItemTitle">是否被动激活输入框</div>
                          <div class="flex-1 ml-[5px]">
                            <NSwitch
                              v-model:value={info.TextInputForm.passivelyActivated}
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px] flex items-center">
                          <div class="settingItemTitle">成对输入框</div>
                          <div class="flex-1 ml-[5px]">
                            <NSwitch
                              v-model:value={info.TextInputForm.pair}
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        {info.TextInputForm.pair && (
                          <div class="mt-[20px]">
                            <div class="settingItemTitle">成对输入框中间的分隔符</div>
                            <div class="edit-input">
                              <NInput
                                v-model:value={info.TextInputForm.separator}
                                placeholder="请输入"
                                clearable
                                onBlur={handOptions}
                              />
                            </div>
                          </div>
                        )}
                        <div class="mt-[20px]">
                          <div class="settingItemTitle">输入框行数</div>
                          <div class="edit-input">
                            <NInputNumber
                              v-model:value={info.TextInputForm.rows}
                              placeholder="对textarea生效"
                              clearable
                              onBlur={handOptions}
                            />
                          </div>
                        </div>
                        <div class="mt-[20px]">
                          <div class="settingItemTitle">高度类型</div>
                          <div class="edit-input">
                            <NSelect
                              v-model:value={info.TextInputForm.autosizeType}
                              options={autosizeTypeOptions}
                              placeholder="请选择"
                              clearable
                              onUpdateValue={handOptions}
                            />
                          </div>
                        </div>
                        {info.TextInputForm.autosizeType === 'boolean' ? (
                          <div class="mt-[20px] flex items-center">
                            <div class="settingItemTitle">自适应内容高度</div>
                            <div class="flex-1 ml-[5px]">
                              <NSwitch
                                v-model:value={info.TextInputForm.autosize}
                                onUpdateValue={handOptions}
                              />
                            </div>
                          </div>
                        ) : (
                          <>
                            <div class="mt-[20px]">
                              <div class="settingItemTitle">最小展示行数</div>
                              <div class="edit-input">
                                <NInputNumber
                                  v-model:value={info.TextInputForm.minRows}
                                  placeholder="对textarea生效"
                                  clearable
                                  onBlur={handOptions}
                                />
                              </div>
                            </div>
                            <div class="mt-[20px]">
                              <div class="settingItemTitle">最大展示行数</div>
                              <div class="edit-input">
                                <NInputNumber
                                  v-model:value={info.TextInputForm.maxRows}
                                  placeholder="对textarea生效"
                                  clearable
                                  onBlur={handOptions}
                                />
                              </div>
                            </div>
                          </>
                        )}
                        <div class="mt-[20px]">
                          <div class="settingItemTitle">是否展示加载图标</div>
                          <div class="edit-input">
                            <NButtonGroup>
                              <NButton
                                type={info.TextInputForm.loading === true ? 'primary' : 'default'}
                                round
                                onClick={() => loadingChange(info, true, handOptions)}
                              >
                                <span>展示</span>
                              </NButton>
                              <NButton
                                type={info.TextInputForm.loading === false ? 'primary' : 'default'}
                                round
                                onClick={() => loadingChange(info, false, handOptions)}
                              >
                                <span>不展示(占位)</span>
                              </NButton>
                              <NButton
                                type={
                                  info.TextInputForm.loading === undefined ? 'primary' : 'default'
                                }
                                round
                                onClick={() => loadingChange(info, undefined, handOptions)}
                              >
                                <span>不展示(不占位)</span>
                              </NButton>
                            </NButtonGroup>
                          </div>
                        </div>
                      </div>
                    )}
                  </>
                )
              }}
            />
          )
        }}
      />
    )
  }
})
